<!--/**
* Author: ganqz
* Date: 2022-08-08 16:37
* Desc: InviteActivity
*/
-->
<template>
  <view class="home-page__invite" v-if="!isReceive && startEnd">
    <view class="home-page__invite--header">{{ info.name }}</view>
    <view>
      <invite-box
        @click="onInvite"
        :list="list"
        src-key="headImg"
        id-key="memberId"
      >
        <view slot="title" class="home-page__invite--title flex-m">
          <text class="ellipsis name">{{ info.prizeName }}</text>
          <text class="ml20 rule" @click.stop="openRule">活动规则</text></view
        >
      </invite-box>
    </view>
    <view class="home-page__invite--btn" @click="onBtn()">{{
      completeData.isComplete && !isReceive ? '已完成，立即领取' : '立即邀请'
    }}</view>
    <invite-rule
      v-if="showRule"
      v-model="showRule"
      :act-id="info.id"
      @toShare="onInvite"
    />
    <invite-pop
      v-if="showInvite"
      v-model="showInvite"
      :obj="shareParams"
      padding-bottom="150"
      :activity-id="info.id"
      @click-item="onPartInInviteActivity"
    ></invite-pop>
  </view>
</template>
<script>
  import InviteBox from '@/pages/friends/components/InviteBox.vue'
  import InvitePop from '@/pages/friends/components/InvitePop.vue'
  import InviteRule from './InviteRule.vue'
  import dayjs from 'dayjs'
  export default {
    name: 'invite-activity',
    components: { InvitePop, InviteBox, InviteRule },
    data() {
      return {
        info: {},
        showInvite: false,
        showRule: false,
        shareParams: {}
      }
    },
    computed: {
      completeData() {
        return this.info.completeData
      },
      list() {
        const data = this.info.completeData
        const inviteList = (data && data.inviteList) || []
        const res = [...inviteList]
        const addLen = +this.info.targetNum - res.length
        for (let i = 0; i < addLen; i++) {
          res.push({
            memberId: '',
            headImg: ''
          })
        }
        // res.length = +this.info.targetNum || 0
        // console.log(res)
        return res
      },
      isReceive() {
        const data = this.info.completeData
        return (data && data.isReceive) || ''
      },
      startEnd() {
        //已开始未结束
        const start = this.info.startTime
        const end = this.info.endTime
        console.log(dayjs().isAfter(start) && dayjs().isBefore(end))
        return dayjs().isAfter(start) && dayjs().isBefore(end)
      }
    },
    mounted() {
      // this.init()
    },
    methods: {
      init() {
        this.getInviteActivity()
      },
      getInviteActivity() {
        uni.$api.activity.getInviteActivity().then((res) => {
          this.info = res
        })
      },
      onPartInInviteActivity() {
        console.log('onPartInInviteActivity')
        uni.$api.activity.partInInviteActivity({ activityId: this.info.id })
      },
      onBtn() {
        //已经完成任务走邀请
        if (this.completeData.isComplete) {
          uni.$api.activity
            .receivePrize({ activityId: this.info.id })
            .then((res) => {
              this.getInviteActivity()
              this.$msg.toast(res)
            })
        } else {
          this.onInvite()
        }
      },
      openRule() {
        console.log('showRule')
        this.showRule = true
      },
      onInvite() {
        //未完成点击就是走邀请
        if (!this.info.isComplete) {
          this.$auth.toGetUserInfo(true).then((res) => {
            console.log(res, 'res')
            this.shareParams = {
              registerActivityId: this.info.id,
              type: 'activity'
            }
            console.log(this.shareParams)
            if ([1, 2].includes(res.memberLevel)) {
              this.showInvite = true
            } else {
              // this.showInvite = true
              this.$tools.navigateTo('/pages/friends/index', {
                registerActivityId: this.info.id
              })
            }
          })
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .home-page {
    &__invite {
      .rule {
        color: #fa5a0b;
        text-decoration: underline;
      }
      overflow: hidden;
      margin: 0 auto 20rpx;
      height: 326rpx;
      background: #ffffff;
      box-shadow: 0rpx -5rpx 21rpx 0rpx rgba(79, 199, 238, 0.35);
      border-radius: 18rpx;
    }
    &__invite--header {
      margin: -10rpx auto 9rpx;
      width: 439rpx;
      height: 71rpx;
      background: url('https://public-oss-file.zmaxfilm.com/applet/img/my/title-invite.png')
        no-repeat;
      background-size: 100%;

      font-size: 30rpx;
      font-family: Alibaba PuHuiTi;
      font-weight: bold;
      color: #ffffff;
      line-height: 71rpx;
      text-align: center;
      padding-left: 10rpx;
    }
    &__invite--title {
      margin-bottom: 26rpx;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #333333;
      text-align: center;
      .name {
        max-width: 400rpx;
        display: inline-block;
      }
    }
    &__invite--btn {
      margin: 0 auto;
      margin-top: 22rpx;
      width: 362rpx;
      height: 86rpx;
      background: url('https://public-oss-file.zmaxfilm.com/applet/img/my/btn-invite.png')
        no-repeat;
      background-size: 100%;
      font-size: 32rpx;
      font-family: Alibaba PuHuiTi;
      font-weight: bold;
      color: #fa5a0b;
      line-height: 70rpx;
      text-align: center;
    }
  }
</style>
